<template>
	<view class="container">
		<view class='parent'>
		    <ourLoading color="#3AD79D" textColor="#3AD79D" 
			:active="!longState" text="努力加载中" />
		</view>
		<!-- 自定义头部 -->
		<!-- <myhead title="登录/注册" :color="'#000'" :titleShow="true" :background="'#fff'"></myhead> -->
		<!-- 头图片  -->
		<view v-if="longState" style="width:100%;height: 450rpx;">
			<image src="../../static/index/gonglu1.png" mode="aspectFill" class="yltd-1" style="width: 100%; height: 100%;"></image>
		</view>
		<view v-if="longState" style="width:100%;display: flex;align-items: center;margin: 50rpx 0 30rpx;justify-content: center;">
			<image src="../../static/index/logo.png" style="width: 100rpx;height: 100rpx;margin-right: 10rpx;"></image>
			<view style="font-weight: bold;font-size: 42rpx;color: #121212;">欢迎使用上架系统</view>
		</view>
		<view v-if="longState" style="margin: 0 70rpx;">
			<view class="yltd-2">
				<view style="display: flex;align-items: center;border-bottom: #5E9CF1 2rpx solid;margin-top: 20rpx;">
					<input type="number" v-model="username" placeholder="请输入账号" placeholder-style="color: #5E9CF1;" />
				</view>
				<view style="display: flex;align-items: center;border-bottom: #5E9CF1 2rpx solid;margin-top: 60rpx;">
					<input :password="showPassword" type="text" v-model="password" placeholder="请输入密码"
						placeholder-style="color: #5E9CF1;" />
					<view @click="showPwd" style="margin-left: auto;color: #5E9CF1;">
						<image
							:src="showPassword == false ?'../../static/images/open.png':'../../static/images/close.png'"
							style="width:40rpx;height: 40rpx;margin-left: auto;"></image>
					</view>
				</view>

			</view>
			<view class="loginButton">
				<button class="loginButton-2" hover-class="hover-class-bg" @click="passwordLogin()">账号登录</button>
				<!-- <view style="display: flex;width:100%;margin-top: 0rpx;">
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						style="font-size: 26rpx;margin: 0;padding: 0 5rpx; display: flex; align-items: center;">
						<uni-icons type="weixin" size="18" color="#68c558"></uni-icons>
						<text>微信一键登录</text>
					</button>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import ourLoading from '@/components/our-loading/our-loading.vue'//自定义加载动画
	// import method from '@/util/method.js';
	// import myhead from '@/components/head/head.vue';
	export default {
		components: {
			// myhead
			ourLoading
		},
		data() {
			return {
				username:'admin',//13244757966   ry、cang
				password: '666666',
				showPassword: true,
				longState: false,//控制登录页面显示和隐藏
			}
		},
		methods: {
			showPwd() {
				this.showPassword = !this.showPassword;
			},
			// 注册账号
			// register() {
			// 	uni.navigateTo({
			// 		url: './register'
			// 	})
			// },
			//账号登录 
			passwordLogin() {
				if (this.username == '' || this.password == '') {
					uni.showToast({
						title: '账号或密码不能为空!',
						icon: 'none'
					});
				} else {
					uni.showLoading({title: '登录中',mask: true})
					uni.reLaunch({
						url:'../home/home'
					})
					// this.$http.post('/api/user/login', {
					// 	username: this.username,
					// 	password: this.password,
					// }).then(res => {
					// 	if (res.data.token) {
					// 		this.$method.setStorageTo("token", res.data.token)
					// 		// this.getBasicInformation(res.data.token)
					// 		uni.reLaunch({
					// 			url:'../home/home'
					// 		})
					// 	} else {
					// 		uni.showToast({title: res.msg,icon: 'none'});
					// 	}
					// })
				}
			},
			// 获取基本信息 
			getBasicInformation(token) {
				this.$http.get('/api/user/info', {token:token},true).then(res => {
					console.log('---------',res)
					if(res){
						if (res.data) {
							this.$method.setStorageTo("getInfo", res)
							uni.reLaunch({
								url:'../home/homePage'
							})
						} else {
							uni.showToast({title: res.msg,icon: 'none'});
						}
					}else{
						this.longState = true //是否显示画面
					}
				})
			}
		},
		onLoad(e) { //页面加载完执行
			console.log('onLoad')
		},
		onShow() { //每次进入页面执行
			this.longState = false //是否显示画面
			console.log(this.$method.getStorageTo("token"))
			if(this.$method.getStorageTo("token")){
				this.getBasicInformation(this.$method.getStorageTo("token"))
			}else{
				this.longState = true //是否显示画面
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		background-color: #fff;
	}

	.container {
		font-size: 14px;
		line-height: 24px;
	}

	.yltd-1 {
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
	}

	.yltd-2 {
		margin-top: 20rpx;

		input {
			padding: 10rpx 5rpx;
			color: #5E9CF1;
		}

		.yltd-2-3 {
			color: #5E9CF1;
			font-size: 22rpx;

			span {
				color: #5E9CF1;
			}
		}
	}

	.loginButton {
		margin-top: 70rpx;

		button::after {
			border: none;
		}

		button {
			background-color: transparent;
			padding-left: 0;
			padding-right: 0;
			line-height: inherit;
			border-radius: 0;
		}

		.loginButton-1 {
			height: 80rpx;
			line-height: 80rpx;
			border: #B9B9B9 1rpx solid;
			margin-bottom: 30rpx;
			border-radius: 10rpx;
		}

		.loginButton-2 {
			height: 80rpx;
			line-height: 80rpx;
			border: #5555ff 1rpx solid;
			border-radius: 10rpx;
			color: #FFFFFF;
			background-color:#5E9CF1;
		}

		.hover-class-bg {
			border: #B9B9B9 1rpx solid;
			background: #999999 !important;
		}
	}

	.WeChat {
		color: #796AD2;
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		font-size: 26rpx;
		transform: translate(-50%, 0);
		border: none;
		background-color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
		border-radius: 0;
	}

	.login-code-img {
		height: 35px;
		width: 160rpx;
		margin-left: auto;
	}
</style>